<template>
  <div class="user-page">
    <div class="user-page-head">
      <div class="top">
        <img style="margin-left: 20px; width: 80px;height: 80px; border-radius: 40px;"
          :src="user?.avatarUrl ? baseURL + user?.avatarUrl : avatarImg" alt="">
        <div class="name">
          <p>{{ user?.nickName }}</p>
          <p>{{ user?.phone }}</p>
        </div>
      </div>
    </div>
    <!-- 快捷工具 -->
    <div class="user-page-group">
      <van-cell v-for="(item, i) in tools" :key="item.label" :title="item.label" :to="item.path" is-link :border="false">
        <template #icon>
          <cp-icon :name="`user-tool-0${i + 1}`" />
          <!-- <van-icon name="manager-o" /> -->
        </template>
      </van-cell>
    </div>
    <!-- 退出登录 -->
    <a href="javascript:;" class="logout" @click="onLogout">退出登录</a>
  </div>
</template>

<script setup lang="ts">
import { getUserInfo, logout } from '@/services/user'
import { useUserStore } from '@/stores'
import { showConfirmDialog } from 'vant'
import avatarImg from '@/assets/mine/avatar.jpeg'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { baseURL } from '@/utils/request'

const user = ref()

onMounted(async () => {
  const res = await getUserInfo()
  user.value = res.data
  console.log('个人信息详情：:', res);
  console.log('res.data.avatarUrl:', user.value.avatarUrl);

  if (user.value.avatarUrl == "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg") {
    user.value.avatarUrl = ""
  }
})

// 初始化快捷工具
const tools = [
  { label: '个人信息', path: '/user/info' },
  { label: '优惠券', path: '/user/coupon' },
  { label: '我的收藏', path: '/user/collection' },
  { label: '商户信息上传', path: '/user/merchantUpload' },
]
// 退出
const store = useUserStore()
const router = useRouter()
const onLogout = async () => {
  await showConfirmDialog({
    title: '温馨提示',
    message: '确定要退出登录吗？'
  }).then(() => {
    logout().then((res) => {
      // 点击的确认
      if (res.code === 200) {
        store.delUser()
        router.push('/login')
      }
    })
  }).catch(() => {

  })
}

</script>

<style lang="scss" scoped>
.user-page {
  background-color: #f5f5f5;
  // position: relative;
  display: flex;
  align-items: center;
  // justify-content: space-between;
  flex-direction: column;
  min-height: calc(100vh - 50px);

  // padding: 0 15px 65px;
  // 头部
  &-head {
    background: url("@/assets/mine/bg.png") no-repeat;
    background-size: cover;
    width: 100%;
    height: 280px;

    // min-height: calc(100vh - 50px);
    // height: 200px;
    // background: linear-gradient(
    //   180deg,
    //   rgba(44, 181, 165, 0.46),
    //   rgba(44, 181, 165, 0)
    // );
    // margin: 0 -15px;
    // padding: 0 15px;
    .top {
      display: flex;
      padding-top: 100px;
      align-items: center;

      .van-image {
        padding-left: 15px;
        width: 60px;
        height: 60px;
      }

      .name {
        padding-left: 10px;
        color: #fff;

        p {
          &:first-child {
            font-size: 18px;
            font-weight: 500;
          }

          &:last-child {
            margin-top: 10px;
            font-size: 16px;
          }
        }
      }
    }

    .van-row {
      margin: 0 -15px;
      padding-top: 15px;

      p {
        text-align: center;

        &:first-child {
          font-size: 18px;
          font-weight: 500;
        }

        &:last-child {
          color: var(--cp-dark);
          font-size: 12px;
          padding-top: 4px;
        }
      }
    }
  }

  // 订单
  &-order {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    padding-bottom: 15px;

    .head {
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      padding: 0 15px;

      a {
        color: var(--cp-tip);
      }
    }

    .van-col {
      text-align: center;

      .cp-icon {
        font-size: 28px;
      }

      p {
        padding-top: 4px;
        font-size: 12px;
      }
    }
  }

  // 分组
  &-group {
    // position: absolute;
    // top: 186px;
    margin-top: -80px;
    width: 340px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    h3 {
      padding-left: 16px;
      line-height: 44px;
    }

    .van-cell {
      align-items: center;
    }

    .cp-icon {
      font-size: 17px;
      margin-right: 10px;
    }
  }

  .logout {
    // position: absolute;
    // top: 500px;
    margin-top: 20px;
    display: block;
    // margin: 140px auto 0;
    font-size: 16px;
    width: 340px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: var(--cp-primary);
    border-radius: 172px;
    border: 1px solid var(--cp-primary);
  }
}
</style>
